<template>
<div >
    <div v-loading="loading" v-show="isLogin" class="login">
        <h1>登陆到集群终端（Centos7系统）：</h1>
        <p class="tips">tips:提示“Websocket authentication failed.”等网络问题，请尝试重新连接</p>
        <div class="loginBox">
            <el-card class="card">
                <div class="password">
                    <h3>用户名：{{username}}</h3>
                </div>
                <div class="password">
                    <h3 class="line">密码：</h3>
                    <el-input show-password @keyup.enter.native="loginSystem" v-model="password"></el-input>
                </div>
                <el-button class="loginBtn" type="primary" @click="loginSystem">登陆</el-button>
            </el-card>
        </div>
    </div>
    <div v-show="isLogin === false" >
        <iframe class="webssh" ref="webssh" :src="src" frameborder="0"></iframe>
    </div>
</div>
</template>
<script>
import { checkLogin } from "@/utils/checkLogin"
export default{
    data(){
        return{
            username:'',
            password:'',
            isLogin:true,
            src:'',
            loading:true,
        }
    },
    mounted(){
        let that = this;
        let sec = 1
        let getName = setInterval(() => {
            let name = checkLogin().name || undefined;
            sec++
            if(name !== undefined && name !== 'undefined'){
                that.username = name;
                that.loading = false;
                clearInterval(getName);
            }
            if(sec >= 5){
                this.$message.error('获取用户名失败！');
                that.loading = false;
                clearInterval(getName);
            }
        },1000)
    },
    methods:{
        loginSystem(){
            if(this.username === '' || this.password === ''){
                this.$message.error('请输入用户名或密码！')
                return
            }
            this.isLogin = false;
            let code = window.btoa(unescape(encodeURIComponent(this.password)))
            this.src = `http://c7.cabc.top:8231/#fontsize=20?term=xterm-256color&hostname=101.200.127.233&port=8216&username=${this.username}&password=${code}`
            this.isLogin = false
        }
    }
}
</script>
<style scoped>
.webssh{
    width: 100%;
    height: 100vh;
    background-color: black;
}
.login{
    width: 80%;
    margin: 100px auto;
}
.loginBox{
    margin: 100px auto;
}
.password{
    display: flex;
}
.el-input{
    width: auto;
    margin: auto 0;
}
.card{
    width: 400px;
    height: 300px;
    padding: 50px;
    margin: 0 auto;
}
.loginBtn{
    margin: 20px 30%;
}
.tips{
    font-size: small;
    color: darkgray;
}
.line{
    width: 80px;
}
</style>
    